{include file="public/header" /}
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden" >
<input type="hidden" id="theme" value="{$theme}">
<div id="wrapper" >
    <!--左侧导航开始-->
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="nav-close"><i class="fa fa-times-circle"></i>
        </div>
        <div class="sidebar-collapse">
            <ul class="nav" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element" style="text-align:center">
                        <span>
                            <ul id="view" >
                                <li><img data-original="{$portrait}" src="{$portrait}" class="img-circle"  style="width:70px;height:70px;cursor:pointer;" onerror="this.src='/static/admin/images/head_default.gif'" /></li>
                            </ul>
                        </span>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear">
                                <span class="block m-t-xs"><strong class="font-bold">{$username}</strong></span>
                                <span class="text-muted text-xs block">{$rolename}<b class="caret"></b></span>
                            </span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li><a href="javascript:;" onclick="wk.layer_show1('修改头像',$('#headCrop'),700,550)" ><i class="fa fa-crop"></i> 修改头像</a></li>
                            <li><a href="javascript:;" onclick="wk.layer_show1('修改密码',$('#changePwd'),500,380)"><i class="fa fa-unlock-alt"></i> 修改密码</a></li>
                            <!--<li><a href="javascript:;" id="cache"><i class="fa fa-hourglass-half"></i> 清除缓存</a></li>-->
                            <li class="divider"></li>
                            <li><a href="{:url('admin/login/loginOut')}"><i class="fa fa-sign-out"></i> 安全退出</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">H+</div>
                </li>
                {if !empty($menu)}
                    {foreach name="menu" item="vo"}
                        <li class="menu">
                            {if condition="$vo.name eq '#'"}
                                <a href="{$vo.href}">
                                    <i class="{$vo.css}"></i>
                                    <span class="nav-label">{$vo.title} </span>
                                    <span class="fa arrow"></span>
                                </a>
                            {else /}
                                <a class="J_menuItem" href="{$vo.href}">
                                    <i class="{$vo.css}"></i>
                                    <span class="nav-label">{$vo.title} </span>
                                </a>
                            {/if}
                            {if condition="$vo.name eq '#'"}
                            <ul class="nav nav-second-level">
                                {if !empty($vo['child'])}
                                    {foreach name="$vo['child']" item="v"}
                                        {if condition="$v.name neq '##'"}
                                            <li>
                                                <a class="J_menuItem" href="{$v.href}">{$v.title}</a>
                                            </li>
                                        {else /}
                                            <li>
                                                <a href="{$v.href}">{$v.title}<span class="fa arrow"></span></a>
                                                <ul class="nav nav-third-level">
                                                    {if !empty($v['child'])}
                                                        {foreach name="$v['child']" item="z"}
                                                        <li><a class="J_menuItem" href="{$z.href}">{$z.title}</a>
                                                        </li>
                                                        {/foreach}
                                                    {/if}
                                                </ul>
                                            </li>
                                        {/if}
                                    {/foreach}
                                {/if}
                            </ul>
                            {/if}
                        </li>
                    {/foreach}
                {/if}
            </ul>
        </div>
    </nav>
    <!--左侧导航结束-->
    <!--右侧部分开始-->
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i
                        class="fa fa-bars"></i> </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <!--<li class="dropdown hidden-xs">-->
                        <!--<a href="javascript:;" data-toggle="modal" data-target="#myTags" aria-expanded="false">-->
                            <!--<i class="fa fa-tags"></i> 标签-->
                        <!--</a>-->
                    <!--</li>-->
                    <!--<li class="dropdown hidden-xs">-->
                        <!--<a class="right-sidebar-toggle" aria-expanded="false">-->
                            <!--<i class="fa fa-tasks"></i> 主题-->
                        <!--</a>-->
                    <!--</li>-->

                </ul>
            </nav>
        </div>
        <div class="row content-tabs">
            <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i>
            </button>
            <nav class="page-tabs J_menuTabs">
                <div class="page-tabs-content">
                    <a href="javascript:;" class="active J_menuTab" data-id="index.html">首页</a>
                </div>
            </nav>
            <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i>
            </button>
            <div class="btn-group roll-nav roll-right">
                <button class="dropdown J_tabClose" data-toggle="dropdown">常用操作<span class="caret"></span></button>
                <ul role="menu" class="dropdown-menu dropdown-menu-right animated fadeInRight">
                    <li class="J_tabFresh"><a><i class="fa fa-repeat"></i> 刷 新</a></li>
                    <li class="divider"></li>
                    <li class="J_tabGo"><a><i class="fa fa-mail-forward"></i> 前 进</a></li>
                    <li class="J_tabBack"><a><i class="fa fa-mail-reply"></i> 后 退</a></li>
                    <li class="divider"></li>
                    <li class="J_tabShowActive"><a><i class="fa fa-crosshairs"></i> 定位当前选项卡</a></li>
                    <li class="divider"></li>
                    <li class="J_tabCloseOther"><a><i class="fa fa-times-circle-o"></i> 关闭其他选项卡</a></li>
                    <li class="J_tabCloseAll"><a><i class="fa fa-times-circle"></i> 关闭全部选项卡</a></li>
                </ul>
            </div>
            <a href="javascript:;" id="logout" class="roll-nav roll-right J_tabExit">
                <i class="fa fa fa-sign-out"></i>退出
            </a>
        </div>
        <div class="row J_mainContent" id="content-main">
            <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="{:url('Index/indexPage')}" frameborder="0" data-id="index.html" seamless></iframe>
        </div>
        <div class="footer">
            <div class="pull-right">&copy; 2017-2018 {:config('web_site_title')} 版权所有
            </div>
        </div>
    </div>
    <!--右侧部分结束-->
    <!--右侧边栏开始-->
    <div id="right-sidebar">
        <div class="sidebar-container">
            <ul class="nav nav-tabs navs-9">
                <li class="active">
                    <a data-toggle="tab" href="#tab-1">
                        <i class="fa fa-gear"></i> 主题
                    </a>
                </li>

            </ul>
            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="sidebar-title">
                        <h3> <i class="fa fa-comments-o"></i> 主题设置</h3>
                        <small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地，下次打开的时候会直接应用这些设置。</small>
                    </div>
                    <div class="skin-setttings">
                        <div class="title">主题设置</div>
                        <div class="setings-item">
                            <span>收起左侧菜单</span>
                            <div class="switch">
                                <div class="onoffswitch">
                                    <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu" onclick="coll()">
                                    <label class="onoffswitch-label" for="collapsemenu">
                                        <span class="onoffswitch-inner"></span>
                                        <span class="onoffswitch-switch"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="setings-item">
                            <span>固定顶部</span>
                            <div class="switch">
                                <div class="onoffswitch">
                                    <input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar" onclick="fixed()">
                                    <label class="onoffswitch-label" for="fixednavbar">
                                        <span class="onoffswitch-inner"></span>
                                        <span class="onoffswitch-switch"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="setings-item">
                            <span>固定宽度</span>
                            <div class="switch">
                                <div class="onoffswitch">
                                    <input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout" onclick="boxed()">
                                    <label class="onoffswitch-label" for="boxedlayout">
                                        <span class="onoffswitch-inner"></span>
                                        <span class="onoffswitch-switch"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="title">皮肤选择</div>
                        <div class="setings-item default-skin nb">
                            <span class="skin-name ">
                                 <a href="#" class="s-skin-0" onclick="changeTheme('1')" >
                                     默认皮肤
                                 </a>
                            </span>
                        </div>
                        <div class="setings-item blue-skin nb">
                            <span class="skin-name " >
                                <a href="#" class="s-skin-1" onclick="changeTheme('2')" >
                                    蓝色主题
                                </a>
                            </span>
                        </div>
                        <div class="setings-item yellow-skin nb">
                            <span class="skin-name ">
                                <a href="#" class="s-skin-3" onclick="changeTheme('3')" >
                                    黄色主题
                                </a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--mini聊天窗口开始-->
        <!--<div class="small-chat-box fadeInUpBig animated ">-->
            <!--<div class="heading" draggable="true">-->
                <!--<small class="chat-date pull-right">-->
                    <!--2015.9.1-->
                <!--</small> 代办事项-->
            <!--</div>-->
        <!--</div>-->
        <!--<div id="small-chat" class="animated bounceInUp">-->
            <!--<span class="badge badge-warning pull-right">0</span>-->
            <!--<a class="open-small-chat">-->
                <!--<i class="fa fa-comments"></i>-->
            <!--</a>-->
        <!--</div>-->
    </div>
    <!--右侧边栏结束-->
</div>
{include file="public/footer" /}
<div id="headCrop" style="display:none">
    <form class="form-horizontal" name="add_rule" id="add_rule">
        <div class="ibox-content">
            <!--图片裁剪框 start-->
            <div class="black-cloth" onclick="closeTailor(this)"></div>
            <div class="tailoring-content">
                <div class="tailoring-content-one">
                    <label title="选择图片" for="chooseImg" class="btn btn-primary btn-outline choose-btn">
                        <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)"><i class="fa fa-link"></i>
                        选择图片
                    </label>
                </div>
                <div class="tailoring-content-two">
                    <div class="tailoring-box-parcel" style="text-align: center">
                        <img id="tailoringImg">
                        <span class="word" style="position:relative;top:50%;font-size:16px">仅支持JPG、JPEG、PNG格式的图片文件</span><br>
                        <span class="size" style="position:relative;top:50%;font-size:16px">文件不能大于2MB</span>
                    </div>
                    <div class="preview-box-parcel">
                        <p>图片预览：</p>
                        <div class="square previewImg"></div>
                        <div class="circular previewImg"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--图片裁剪框 end-->
        <div class="modal-footer">
            <span class="btn btn-primary btn-outline cropper-reset-btn" style="float:left">复位</span>
            <span class="btn btn-primary btn-outline zoomIn" style="float:left">放大</span>
            <span class="btn btn-primary btn-outline zoomOut" style="float:left">缩小</span>
            <span class="btn btn-primary btn-outline cropper-rotate-btn" style="float:left">旋转</span>
            <span  class="btn btn-primary btn-outline cropper-scaleX-btn" style="float:left">换向</span>
            <span class="btn btn-primary" id="sureCut"><i class="fa fa-save"></i> 保存</span>
            <button type="button" class="btn btn-danger" onclick="layer.closeAll()"><i class="fa fa-close"></i> 关闭</button>
        </div>
    </form>
</div>
<!--标签-->
<!--<div class="modal  fade" id="myTags" tabindex="-1" role="dialog"  aria-hidden="true">-->
    <!--<div class="modal-dialog">-->
        <!--<div class="modal-content">-->
            <!--<div class="modal-header">-->
                <!--<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>-->
                <!--<h3 class="modal-title">添加标签</h3>-->
            <!--</div>-->
            <!--<form class="form-horizontal"  id="add_tags">-->
                <!--<div class="ibox-content">-->
                    <!--<div class="form-group">-->
                        <!--<label class="col-sm-3 control-label">标题</label>-->
                        <!--<div class="col-sm-8">-->
                            <!--<input type="text" name="tag_title" id="tag_title" placeholder="输入标签标题" class="form-control" autocomplete="off"/>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="hr-line-dashed"></div>-->
                    <!--<div class="form-group">-->
                        <!--<label class="col-sm-3 control-label">日期</label>-->
                        <!--<div class="col-sm-8">-->
                            <!--<input type="text"  name="tag_time" onclick="laydate({istime: true,format: 'YYYY-MM-DD hh:mm'})" id="start_date" class="form-control layer-date" placeholder="输入日期" autocomplete="off"/>-->
                            <!--<span class="help-block m-b-none" ><i class="fa fa-info-circle"></i> 必填</span>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="hr-line-dashed"></div>-->
                    <!--<div class="form-group">-->
                        <!--<label class="col-sm-3 control-label">内容</label>-->
                        <!--<div class="col-sm-8">-->
                            <!--<textarea type="text" rows="5" name="tag_content" id="tag_content" placeholder="输入标签内容" class="form-control"></textarea>-->
                            <!--<span class="help-block m-b-none" ><i class="fa fa-info-circle"></i> 必填</span>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="modal-footer">-->
                    <!--<button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> 保存</button>-->
                    <!--<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-close"></i> 关闭</button>-->
                <!--</div>-->
            <!--</form>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->

<!--修改密码-->
<div id="changePwd" style="display:none;">
    <div class="layui-fluid layui-col-xs12">
        <div class="layui-card-body layui-form">
            <div class="layui-row layui-col-space20 layui-form-item ">
                <div class="layui-form-item layui-col-xs10">
                    <label class="layui-form-label">原密码：</label>
                    <div class="layui-input-block">
                        <input type="password" name="old_pwd"  placeholder="输入原密码" lay-verify="required|oldpwd" class="layui-input" autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-form-item layui-col-xs10">
                    <label class="layui-form-label">新密码：</label>
                    <div class="layui-input-block">
                        <input type="password" name="new_pwd"  placeholder="输入新密码" lay-verify="required|newpwd" class="layui-input" autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-form-item layui-col-xs10">
                    <label class="layui-form-label">确认密码：</label>
                    <div class="layui-input-block">
                        <input type="password" name="r_pwd"  placeholder="输入确认密码" lay-verify="required|rpwd" class="layui-input" autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-form-item layui-col-xs-offset1 layui-col-xs8">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="component-form-element">保存
                        </button>
                        <button class="layui-btn layui-btn-primary" onclick="layer.closeAll()">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__JS__/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="__JS__/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="__JS__/hplus.min.js?v=4.1.0"></script>
<script src="__JS__/contabs.js"></script>
<script src="__JS__/plugins/pace/pace.min.js"></script>
<script src="__JS__/Crop.js"></script>
<script type="text/javascript">
    //view查看图片
    $('#view').viewer({
        url: 'data-original',
    });
    $(function(){
        var theme = $('#theme').val();
        //修改主题
        if(theme != ""){
            if(theme == 2){
                $('body').addClass('skin-1');
            }else if(theme == 3){
                $('body').addClass('skin-3');
            }
        }
    })

    //修改主题
    function changeTheme(id){
        $.ajax({
            url:"{:url('user/theme')}",
            type:'post',
            dataType:'json',
            data:'id='+id,
            success:function(data){
                // if(data.code == 100){
                // wk.error(data.msg,2,'');
                // }
            }
        })
    }

    //退出登录
    $(document).ready(function(){
        $("#logout").click(function(){
            layer.confirm('你确定要退出吗？', {icon: 3,title:'提示'}, function(index){
                layer.close(index);
                window.location.href="{:url('admin/login/loginOut')}";
            });
        });
    });

    //清除缓存
    $(function(){
        $("#cache").click(function(){
            layer.confirm('你确定要清除缓存吗？', {icon: 3, title:'提示'}, function(index){
                $.getJSON("{:url('admin/index/clear')}",function(res){
                    if(res.code == 200){
                        wk.success(res.msg);
                    }else if(res.code == 100){
                        wk.error(res.msg);
                    }
                });
                layer.close(index);
            })
        });
    });


    //裁剪后的处理
    $("#sureCut").on("click",function () {
        if ($("#tailoringImg").attr("src") == null ){
            return false;
        }else{
            var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            //关闭裁剪框
            layer.closeAll();
            $.ajax({
                url : "{:url('Upload/updateFace')}",
                type : "post",
                dataType : "json",
                data:"base64url="+base64url+"&id={:session('uid')}",
                success : function(data) {
                    if(data.code == 200){
                        layer.msg(data.msg, {icon: 1,time:1500,shade: 0.1}, function(index){
                            window.location.reload();
                        });
                    }else if(data.code == 100){
                        wk.error(data.msg);
                        return false;
                    }
                }
            });
        }
    });

    /*添加标签*/
    // $.validator.setDefaults({
    //     highlight: function(e) {
    //         $(e).closest(".form-group").removeClass("has-success").addClass("has-error");
    //         $(e).closest(".form-control").css("color","#737373");
    //     },
    //     success: function(e) {
    //         // $(e).closest(".form-group").removeClass("has-error").addClass("has-success");
    //         $(e).closest(".form-group").removeClass("has-error");
    //     },
    //     errorElement: "span",
    //     errorPlacement: function(e, r) {
    //         e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
    //         if(r.is("#add_tags")){
    //             e.appendTo(r.parent());
    //         }
    //     },
    //     errorClass: "help-block m-b-none",
    //     validClass: "help-block m-b-none"
    // }), $().ready(function() {
    //     var e = "<i class='fa fa-times-circle'></i> ";
    //     $("#add_tags").validate({
    //         rules: {
    //             tag_title:{
    //                 maxlength:10
    //             },
    //             tag_time: {
    //                 required: !0,
    //             },
    //             tag_content:{
    //                 required:!0,
    //                 maxlength:105
    //             }
    //
    //         },
    //         messages: {
    //             tag_title:{
    //                 maxlength: e + "最多可以输入10个字符",
    //             },
    //             tag_time: {
    //                 required: e + "请输入提醒日期",
    //             },
    //             tag_content: {
    //                 required: e + "请输入提醒内容",
    //                 maxlength: e + "最多可以输入105个字符"
    //             },
    //         },
    //         submitHandler: function(form) { //通过之后回调
    // //进行ajax传值
    //             $('button').attr('disabled','disabled');
    //             $.ajax({
    //                 url : "{:url('Tool/addTags')}",
    //                 type : "post",
    //                 dataType : "json",
    //                 data:$("#add_tags").serialize(),
    //                 success : function(data) {
    //                     if(data.code == 200){
    //                         $('#add_tags')[0].reset();
    //                         $("#myTags").modal('hide');
    //                         $('button').removeAttr('disabled');
    //                         wk.success(data.msg,1,'');
    //                     }else if(data.code == 100){
    //                         $('button').removeAttr('disabled');
    //                         wk.error(data.msg,2,'');
    //                         return false;
    //                     }else if(data.code == 0){
    //                         $('button').removeAttr('disabled');
    //                     }
    //                 }
    //             });
    //         }
    //     })
    // });


    /*修改密码*/
    layui.use(['form'], function() {
        var form = layui.form;
        form.verify({
            oldpwd:function(value,item){
                var checkResult = "";
                $.ajax({
                    url:"{:url('User/editPwd')}",
                    type:'post',
                    data:"old_pwd="+value +"&type=checkPassword",
                    async: false,//必须同步
                    success:function(res){
                        if(res.code == 100){
                            checkResult = "原密码错误";
                        }
                    }
                })
                return checkResult;
            },
            newpwd: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格'],
            rpwd:function(value,item){
                if(!/^[\S]{6,12}$/.test(value)){
                    return '密码必须6到12位，且不能出现空格';
                }
                var newpwd = $('input[name=new_pwd]').val();
                if(newpwd != value){
                    return "两次输入密码不一致";
                }
            }

        });
        form.on('submit(component-form-element)', function (data) {
            $('.layui-btn').addClass('layui-disabled').attr('disabled','disabled');
            $.ajax({
                url:"{:url('User/editPwd')}",
                type:'post',
                dataType:'json',
                data:data.field,
                success:function(res){
                    $(".layui-btn").removeClass('layui-disabled').removeAttr('disabled');
                    if (res.code == 200) {
                        wk.success(res.msg,1,"{:url('admin/Login/loginOut')}");
                    } else {
                        wk.error(res.msg);
                    }
                }
            })
        });
    });
</script>
</body>
</html>
